<template>
  <div class="food-detail" v-show="isShow" ref="detailWrapper">
    <div class="detail-wrapper">
      <div class="img-wrapper">
        <img :src="food.image">
        <!--返回按钮-->
        <div class="back">
          <i class="icon-arrow_lift" @click="hideDetail()"></i>
        </div>

      </div>
      <div class="content">
        <div class="title">{{food.name}}</div>

        <div class="detail">
          <span class="num">月售{{food.sellCount}}份</span>
          <span>好评率{{food.rating}}%</span>
        </div>

        <div class="price">
          <span class="new">￥{{food.price}}</span>
          <span class="old" v-if="food.oldPrice">￥{{food.oldPrice}}</span>
        </div>

        <div class="cart-control-wrapper">
          <v-cart-control :food="food"></v-cart-control>
        </div>

        <div class="add-to-cart" @click="addFirst($event)" v-show="!food.count || food.count === 0">
          加入购物车
        </div>
      </div>
      <v-split></v-split>
      <div class="introduce" v-if="food.info">
        <div class="title">商品介绍</div>
        <div class="desc">{{food.info}}</div>
      </div>
      <v-split v-if="food.info"></v-split>
      <div class="ratings">
        <div class="title">商品评价</div>
        <v-select-rating  :ratings="food.ratings"
                          :select-type="selectType"
                          :only-content="onlyContent"
                          :desc="desc">
        </v-select-rating>
        <!--评价内容-->
        <div class="rating-wrapper">
          <ul v-show="food.ratings && food.ratings.length">
            <li v-for="item in food.ratings" v-show="needShow(item.rateType, item.text)" class="rating-item">
              <div class="user">
                <span class="name">{{item.username}}</span>
                <img :src="item.avatar" width="12" height="12" class="avatar">
              </div>
              <div class="time">{{item.rateTime | formatDate}}</div>
              <p class="text">
                <i :class="{'icon-thumb_up': item.rateType === 0,
                            'icon-thumb_down': item.rateType === 1}">
                </i>
                <span class="desc">{{item.text}}</span>
              </p>
            </li>
          </ul>
          <div class="no-rating" v-show="!food.ratings || !food.ratings.length">该商品暂无评价</div>
        </div>
      </div>
    </div>

  </div>
</template>

<script>
  import Vue from 'vue'
  import BScroll from 'better-scroll';
  import CartControl from '../CartControl/CartControl';
  import Split from '../Split/Split';
  import SelectRating from '../SelectRating/SelectRating';
  import {formatDate} from '../../common/js/date';

  const POSITIVE = 0;
  const NEGATIVE = 1;
  const ALL = 2;

  export default {
    data () {
      return {
        isShow: false,
        selectType: ALL,
        onlyContent: true,
        desc: {
          all: '全部',
          positive: '推荐',
          negative: '吐槽'
        }
      }
    },
    components: {
      'v-cart-control': CartControl,
      'v-split': Split,
      'v-select-rating': SelectRating
    },
    props: {
      food: {
        type: Object,
        default() {
          return {}
        }
      }
    },
    created() {
      this.$root.eventHub.$on('ratingtype.select', (type) => {
        this.selectType = type;
        this.$nextTick(() => {
          this.scroll.refresh();
        });
      });
      this.$root.eventHub.$on('content.toggle', (onlyContent) => {
        this.onlyContent = onlyContent;
        this.$nextTick(() => {
          this.scroll.refresh();
        });
      });
    },
    methods: {
      showDetail() {
        this.isShow = true;
        this.$nextTick(() => {
          if (!this.scroll) {
            this.scroll = new BScroll(this.$refs.detailWrapper, {
              click: true
            });
          } else {
            this.scroll.refresh();
          }
        });
      },
      hideDetail() {
        this.isShow = false;
      },
      addFirst(event) {
        if (!event._constructed) {
          return;
        }
        Vue.set(this.food, 'count', 1);
      },
      needShow(type, text) {
        if (this.onlyContent && !text) {
          return false;
        }else if (this.selectType === ALL) {
          return true;
        }else {
          return type === this.selectType;
        }
      }
    },
    filters: {
      formatDate(time) {
        let date = new Date(time);
        return formatDate(date, 'yyyy-MM-dd hh:mm');
      }
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
  @import '../../common/css/icon';
  @import "../../common/css/minxin";

  .food-detail {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 48px;
    width: 100%;
    z-index: 2;
    overflow: hidden;
    background: #f3f5f7;
    .img-wrapper {
      position: relative;
      width: 100%;
      height: 0;
      padding-top: 100%;
      img {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
      }
      .back {
        position: absolute;
        top: 10px;
        left: 0;
        .icon-arrow_lift {
          display: block;
          padding: 18px;
          color: #fff;
        }
      }
    }
    .content {
      position: relative;
      padding: 18px;
      background: #fff;
      .title {
        padding-bottom: 8px;
        font-size: 14px;
        font-weight: 700;
        color: rgb(7, 17, 27);
        line-height: 14px;
      }
      .detail {
        padding-bottom: 18px;
        font-size: 0;
        color: rgb(147, 153, 159);
        line-height: 10px;
        span {
          font-size: 10px;
        }
        .num {
          padding-right: 12px;
        }
      }
      .price {
        font-size: 0;
        .new {
          padding-right: 12px;
          font-size: 14px;
          font-weight: 700;
          color: rgb(240, 20, 20);
          line-height: 24px;
        }
        .old {
          font-size: 10px;
          font-weight: normal;
          text-decoration: line-through;
          color: rgb(147, 153, 159);
        }
      }
      .cart-control-wrapper {
        position: absolute;
        bottom: 12px;
        right: 12px;
      }
      .add-to-cart {
        position: absolute;
        bottom: 18px;
        right: 18px;
        height: 24px;
        z-index: 3;
        padding: 0 12px;
        box-sizing: border-box;
        border-radius: 12px;
        background: rgb(0, 160, 220);
        color: #fff;
        font-size: 10px;
        line-height: 24px;
        text-align: center;
      }
    }
    .introduce {
      padding: 18px;
      background: #fff;
      .title {
        margin-bottom: 6px;
        font-size: 14px;
        font-weight: 600;
        color: rgb(7, 17, 27);
        line-height: 14px;
      }
      .desc {
        padding: 0 8px;
        font-size: 12px;
        font-weight: 200;
        color: rgb(77, 85, 93);
        line-height: 24px;
      }
    }
    .ratings {
      padding-top: 18px;
      background: #fff;
      .title {
        margin-left: 18px;
        line-height: 14px;
        font-size: 14px;
        color: rgb(7, 17, 27);
      }
      .rating-wrapper {
        padding: 0 18px;
        .rating-item {
          position: relative;
          padding: 16px 0;
          .border-1px(rgba(7, 17, 27, .1));
          .user {
            position: absolute;
            right: 0;
            top: 16px;
            line-height: 12px;
            font-size: 0;
            .name {
              margin-right: 6px;
              vertical-align: top;
              font-size: 10px;
              color: rgb(147, 153, 159);
            }
            .avatar {
              border-radius: 50%;
            }
          }
          .time {
            margin-bottom: 6px;
            font-size: 10px;
            color: rgb(147, 153, 159);
            line-height: 12px;
          }
          .text {
            font-size: 0;
            line-height: 16px;
            color: rgb(7, 17, 27);
            i {
              margin-right: 4px;
              font-size: 12px;
              line-height: 16px;
              &.icon-thumb_down {
                color: rgb(147, 153, 159);
              }
              &.icon-thumb_up {
                color: rgb(0, 160, 220);
              }
            }
            .desc {
              font-size: 12px;
            }
          }
        }
        .no-rating {
          margin: 5px 5px;
          font-size: 12px;
          color: rgb(77, 85, 93);
        }
      }
    }
  }
</style>
